<template>
    <mapgis-web-map
        crs="EPSG:3857"
        :center="[125.3,43.85]"
        :zoom="10"
      >    
  
      <!-- 基础底图-天地图（矢量）@Web墨卡托 -->
      <mapgis-rastertile-layer
        layerId="tdt-vec_w"
        url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      />
      <!-- 基础底图-天地图（矢量注记）@Web墨卡托3857 -->
      <mapgis-rastertile-layer
        layerId="tdt-cva_w"
        url="http://t0.tianditu.com/DataServer?T=cva_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      />
  
      <!-- 基础底图-天地图（影像）@Web墨卡托3857 -->
      <mapgis-rastertile-layer
        layerId="tdt-img_w"
        url="http://t0.tianditu.com/DataServer?T=img_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      />
      <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
      <!-- <mapgis-rastertile-layer
        layerId="tdt-cia_w"
        url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      /> -->
  
      <!-- 基础底图-吉林一号切片影像 @Web墨卡托3857 -->
      <mapgis-rastertile-layer
          layerId="myDiTu_jl1"
          url="https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e&sch=wmts"
      />
       <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
       <mapgis-rastertile-layer
        layerId="tdt-cia_w"
        url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      />
  
  
       <!--地图左上角按钮栏-->
       <div id="myToolBtns" class="mytool-btns">
              <div id="buttonDiv" style="float: left;">
                  <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
                  <div class="navbtn-items" v-if=hawkeyeShow @click="togglePanel('hawkeyePanelVisible','hawkeyeFlag')" title="鹰眼" id="hawkeyeBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="hawkeyeFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
                  <div class="navbtn-items" v-if=mapstateShow @click="togglePanel('mapstatePanelVisible','mapstateFlag')" title="地图状态栏" id="mapstateBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="mapstateFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
  
                  <div class="navbtn-items" v-if=printShow @click="togglePanel('printPanelVisible','printFlag')" title="地图打印" id="printBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="printFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
                  <div class="navbtn-items" v-if=scaleShow @click="togglePanel('scalePanelVisible','scaleFlag')" title="比例尺" id="scaleBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="scaleFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
                  <div class="navbtn-items" v-if=drawShow @click="togglePanel('drawPanelVisible','drawFlag')" title="绘制工具" id="drawBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="drawFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
                  <div class="navbtn-items" v-if=attributionShow @click="togglePanel('attributionPanelVisible','attributionFlag')" title="地图属性" id="attributionBtn">
                      <img src="../../assets/images/map_icons/measure.png">
                      <img v-show="attributionFlag" src="../../assets/images/map_icons/selectPoint.png" class="item-selected">
                  </div>
              </div>
        </div>
  
  
      <!-- 导航控件 -->
      <mapgis-navigation showCompass showZoom />
  
      <!-- 比例尺(自定义) -->
      <mapgis-custom-scale
        :outStyle='{"position":"absolute","zIndex":900,"left":"10px","bottom":"30px","maxHeight":"300px","width":"220px"}'
        :class="{'layer-hide':scalePanelVisible}"
      />
  
      <!-- 全屏 -->
      <mapgis-fullscreen position="top-right" />
  
      <!-- 鹰眼 -->
      <mapgis-hawkeye :class="{'layer-hide':hawkeyePanelVisible}" />
  
  
      <!-- 量测工具(高级模式) -->
      <div class="measure-story-control" :class="{'layer-hide':measurePanelVisible}" id="measureTool">
        <mapgis-measure enableControl isAdvanceControl></mapgis-measure>
      </div>
  
      
      <!-- 地图状态栏（使用自定义模式） -->
      <div class="my-map-state"  :class="{'layer-hide':mapstatePanelVisible}">
          <!-- <mapgis-state :default="true" scale level lng lat /> -->
          <mapgis-state :default="false">
            <template v-slot:default="{state}">
              <mapgis-ui-input-group size="default" class="mapgis-test-2d-statebar">
                <mapgis-ui-input addon-before="级别" :value="state.level"/>
                <mapgis-ui-input addon-before="比例尺" :value="state.scale"/>
                <mapgis-ui-input addon-before="经度" :value="state.lng" />
                <mapgis-ui-input addon-before="纬度" :value="state.lat"/>
              </mapgis-ui-input-group>
            </template>
          </mapgis-state>
      </div>
  
      <!-- 地图打印控件 -->
      <mapgis-ui-collapse-card
        :outStyle='{"position":"absolute","zIndex":700,"right":"400px","top":"60px","width":"300px"}'
        position="top-right"
        title="打印"
        :class="{'layer-hide':printPanelVisible}"
        id="printPanel"
      >
        <!-- <vue-component-491-AIcon slot="icon-hiden" :spin="false">
          <use xlink:href="#mapgis-huizhi1" />
        </vue-component-491-AIcon> -->
        <div slot="title">
          <span class="mapgis-custom-scale-card-title">绘制</span>
        </div>
        <!-- <div slot="extra">
          <vue-component-491-AIcon :spin="false">
            <use xlink:href="#mapgis-huizhi1" />
          </vue-component-491-AIcon>
        </div> -->
        <mapgis-print delay :delayTime="1000" />
      </mapgis-ui-collapse-card>
  
      <mapgis-ui-card class="mapgis-test-custom-scale" :class="{'layer-hide':printPanelVisible}">
        <mapgis-custom-scale />
      </mapgis-ui-card>
  
      <mapgis-ui-card class="mapgis-test-custom-legend">
        <mapgis-mvt-legend
          :column="1"
          :outStyle='{"position":"absolute","zIndex":900,"right":"5px","bottom":"10px","maxHeight":"300px","width":"260px"}'
        />
      </mapgis-ui-card>
  
  
      <!-- 地图属性说明小提示 -->
      <mapgis-attribution
          position="bottom-left"
          compact
          customAttribution="这里显示内容-二维属性组件"
          :class="{'layer-hide':attributionPanelVisible}"
      />
  
      <!-- Marker图形标注 -->
      <!-- <mapgis-marker
          :offset="[20,20]"
          :coordinates="[110,30]"
          color="#37495E"
          anchor="center"
          :draggable="false"
      /> -->
  
      <!-- 要素编辑工具 -->
      <mapgis-draw enableControl :class="{'layer-hide':drawPanelVisible}" />
  
      
  
      <!-- 数据输入：查询框 -->
      <!-- <mapgis-ui-input-search
          placeholder="请输入要搜索的查询内容"        
          enterButton="查询"
      /> -->
      <!-- loading="" -->
  
      <!-- 数据输入：下拉选择器(分组类型) -->
      <!-- <mapgis-ui-select defaultValue="武汉" autoWidth enterButton="查询">
        <mapgis-ui-select-opt-group>
          <span slot="label">湖北省</span>
          <mapgis-ui-select-option value="黄冈">黄冈</mapgis-ui-select-option>
          <mapgis-ui-select-option value="武汉">武汉</mapgis-ui-select-option>
        </mapgis-ui-select-opt-group>
        <mapgis-ui-select-opt-group label="浙江省">
          <mapgis-ui-select-option value="杭州">杭州</mapgis-ui-select-option>
        </mapgis-ui-select-opt-group>
      </mapgis-ui-select>  -->
      
      
  
    </mapgis-web-map>
  </template>
  
  <script>
  export default {
          name:'CommonMap',
          components: {
          },
          props: {
              mapCtrlTools:{
                  type:Array,
                  default:function () {
                      return []
                  }
              },
              // lyrdata: {
              //     type: Array,
              //     default: []
              // },
              // mapParams: {
              //     type: Object,
              //     default: {}
              // },
              
          },
          data () {
              return {
                measureShow:true,//测量工具-功能启动图标按钮，默认false不显示                
                hawkeyeShow: true, //默认false不显示
                mapstateShow: true, //默认false不显示
                scaleShow: true, //显示比例尺,默认false不显示
                printShow: true, //默认false不显示
                drawShow: true, //默认false不显示
                attributionShow: true, //默认false不显示              
                
                measurePanelVisible: true, //默认true为隐藏
                hawkeyePanelVisible: true, //默认true为隐藏
                mapstatePanelVisible: true, //默认true为隐藏
                scalePanelVisible: true, //默认true为隐藏
                printPanelVisible: true, //默认true为隐藏              
                drawPanelVisible: true, //默认true为隐藏
                attributionPanelVisible: true, //默认true为隐藏
  
                measureFlag:false, //测量选中显示红色小标志，默认false为隐藏                
                hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
                mapstateFlag:false, //地图状态栏选中显示红色小标志，默认false为隐藏
                scaleFlag:false, //比例尺选中显示红色小标志，默认false为隐藏
                printFlag:false, //地图打印-选中显示红色小标志，默认false为隐藏
                drawFlag:false, //绘制工具-选中显示红色小标志，默认false为隐藏
                attributionFlag:false, //地图属性-选中显示红色小标志，默认false为隐藏
                
  
                  highLightLayer: {},//用于高亮的图层
                  highLightVector: {},//highLightLayer图层的源
                  highLightStyle: {},//highLightLayer图层的style
  
                  location_blue:"",
                  location_green:"",
                  
                  value1: [],
                  value2: [],
  
                  attQueryConditions:"NAME like '%区%'",
  
                  //热力图
                  heatmap_radius: 45, //热力图-热点半径；默认45
                  heatmap_blur: 70, //热力图-模糊尺寸；默认70
  
                  //缓冲区分析
                  buffer_radius:20000, //（单圈）缓冲半径，默认20000米
                  radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径
  
                  //地图量测
                  drawSource: {},//图层数据源
                  drawVector: {},//图层
  
              }
          },
          methods:{
              //切换相关面板（显示/隐藏）
              togglePanel(attr,attr2){
                  this[attr] = !this[attr];
                  this[attr2] = !this[attr2];
              },           
  
              //地图中的面板可拖动
              dragFunc(id) {
                  var Drag = document.getElementById(id);
                  Drag.onmousedown = function(event) {
                      var ev = event || window.event;
                      event.stopPropagation();
                      var disX = ev.clientX - Drag.offsetLeft;
                      var disY = ev.clientY - Drag.offsetTop;
                      document.onmousemove =
                          function(event) {
                              var ev = event ||
                                  window.event;
                              Drag.style.left = ev.clientX - disX + "px";
                              Drag.style.top = ev.clientY -
                                  disY + "px";
                              Drag.style.cursor = "move";
                          };
                  };
                  Drag.onmouseup = function () {
                      document.onmousemove = null;
                      this.style.cursor = "default";
                  };
              }
          },
          created(){
              //region 地图左上角-功能启动图标按钮-初始化控制
              // if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
              //     this.mapCtrlTools.forEach(item=>{
              //         if(item === 1){
              //             this.layerShow = true; //图层控制-功能启动图标按钮
              //         }else if(item === 2){
              //             this.measureShow = true; //测量工具-功能启动图标按钮
              //         }else if(item === 3){
              //             this.printShow = true; //地图打印-功能启动图标按钮
              //         }                    
              //     });
              // }
              //endregion
          },
          mounted(){
              /*地图初始化*/
              //this.initMyMap();
              /*让地图中的某些面板可拖动*/
              this.dragFunc("measureTool");
              this.dragFunc("printPanel");
              //this.dragFunc("sxcx"); //属性查询面板-可拖动           
          },
          watch:{},
          computed:{
              // lyrBox: function () {
              //     return 'lyrBoxDiv' + new Date().valueOf()
              // },
              // tdt: function () {
              //     return 'abcabc' + new Date().valueOf()
              // }
          }
      }
  </script>
  
  <style scoped>
  /*地图工具栏相关样式  */
  .mytool-btns{
      position: relative;
      /*left: 10px;*/
      margin-left:2.5em;
      top: 10px;
      height: 60px;
      /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
      width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
      z-index: 2;
  }
  
  .navbtn-items{
      float: left;
      margin: 0 5px;
      /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: white;
      text-align: center;
  }
  
  .navBtnDiv{
      /*width: auto;*/
      /*background-color:rgba(0,0,0,0);*/
      margin-left: 55px;
      /*margin-top: 5px;*/
  }
  .navbtn-btn{
      margin-right: 10px;
  }
  
  .navbtn-items:hover{
      cursor: pointer;
  }
  
  .navbtn-items>img{
      width:36px;
      height:36px;
      padding:5px;
  }
  .item-selected {
      position: absolute;
      width: 25px !important;
      height: 25px !important;
      left: 15px !important;
      bottom: 0;
  }
  
  .layer-hide {
      display:none;
  }
  
  
  
  .measure-story-control {
      position: absolute;
      top: 15px;
      left: 40%;
  
      z-index: 9;
      background: aliceblue;
      border-radius: 10px;
  }
  
  .my-map-state {
      position: fixed;
      bottom: 10px;
      left: 20%;
      /* right: 10px; */
      /* margin: auto 0; */
      /* right: 10px; */
      z-index: 9;
      background: aliceblue;
      /* border-radius: 10px; */
      /* height: 120px; */
      /* width: 99%; */
  }
  .mapgis-ui-input-group-wrapper {
      display: inline-block;
      width: 220px !important;
      text-align: start;
      vertical-align: top;
  }
  
  </style>
  